import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Grid, Form, Select, Message, Icon, Balloon } from '@alifd/next';
import "./styles/css/common.css";
import "./styles/css/grapheditor.css";
import './graph/Init';
import mxgraph from './graph/index';
import Toolbar from './graph/Toolbar';
import EditorUi from './graph/EditorUi';
import GraphEditor from './graph/Editor';
import './graph/Shapes';
import UrlParams from './graph/UrlParams';
import {Menus} from './graph/Menus';
import grapheditorTxt from './resources/grapheditor.txt';
import editorZhTxt from './resources/editor_zh.txt';
import graphZhTxt from './resources/graph_zh.txt';
import defaultXml from './styles/default.xml';
//import graphApi from '../../api/graph.api';
import { Graph } from './graph/Graph';

const { Row, Col } = Grid;
const {
  mxCell,
  mxUtils,
  mxResources,
  mxCodec,
} = mxgraph;

const xml = '<mxGraphModel dx="1003" dy="570" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="" style="shape=filledEdge;rounded=0;fixDash=1;endArrow=none;strokeWidth=10;fillColor=#ffffff;edgeStyle=orthogonalEdgeStyle;" parent="1" edge="1"><mxGeometry width="60" height="40" relative="1" as="geometry"><mxPoint x="350" y="290" as="sourcePoint"/><mxPoint x="410" y="250" as="targetPoint"/></mxGeometry></mxCell><mxCell id="3" value="" style="shape=ext;double=1;whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1"><mxGeometry x="230" y="140" width="80" height="80" as="geometry"/></mxCell><mxCell id="4" value="" style="shape=filledEdge;rounded=0;fixDash=1;endArrow=none;strokeWidth=10;fillColor=#ffffff;edgeStyle=orthogonalEdgeStyle;" parent="1" edge="1"><mxGeometry width="60" height="40" relative="1" as="geometry"><mxPoint x="450" y="380" as="sourcePoint"/><mxPoint x="510" y="340" as="targetPoint"/></mxGeometry></mxCell><mxCell id="5" value="" style="shape=link;html=1;" parent="1" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="230" y="370" as="sourcePoint"/><mxPoint x="280" y="320" as="targetPoint"/></mxGeometry></mxCell><mxCell id="6" value="" style="edgeStyle=segmentEdgeStyle;endArrow=classic;html=1;" parent="1" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="380" y="440" as="sourcePoint"/><mxPoint x="430" y="390" as="targetPoint"/></mxGeometry></mxCell></root></mxGraphModel>';

export default class Editor extends Component {
  static displayName = 'Editor';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      id: '',
      name: 'name.xml',
      xml: xml,
      contentContainerHeight: window.innerHeight - 100,
    };
  }

  componentDidMount() {
    let self = this;
    let editorUiInit = EditorUi.prototype.init;
    EditorUi.prototype.init = function() {
      editorUiInit.apply(this, arguments);
      // Updates action states which require a backend
      this.actions.get('open').setEnabled(true);
    };

    // Adds required resources (disables loading of fallback properties, this can only
    // be used if we know that all keys are defined in the language specific file)
    mxResources.loadDefaultBundle = false;
    mxResources.parse(grapheditorTxt);
    mxResources.parse(editorZhTxt);
    mxResources.parse(graphZhTxt);
    // Configures the default graph theme
    var themes = new Object();
    themes[Graph.prototype.defaultThemeName] = mxUtils.parseXml(defaultXml).documentElement;
    // Main
    let mEditorUi = new EditorUi(new GraphEditor(false, themes), document.getElementById('graphContainer'));
    let mGraph = mEditorUi.editor.graph;

    if(self.state.xml) {
      mEditorUi.editor._id = self.state.id;
      mEditorUi.editor.filename = self.state.name;
      mGraph.getModel().beginUpdate();
      try {
        const doc = mxUtils.parseXml(self.state.xml);
        const root = doc.documentElement;
        const dec = new mxCodec(root);
        dec.decode(root, mGraph.getModel());
      } finally {
        debugger
        mGraph.getModel().endUpdate();
      }
    }
  }

  render() {
    return (
	    <IceContainer>
        <div id="graphContainer" style={ {position: 'relative', minHeight: this.state.contentContainerHeight} }></div>
	    </IceContainer>
    );
  }
}
